<template>
  <el-drawer v-model="drawerVisible"
             direction="rtl"
             title="bpmn:SequenceFlow"
             :size="500"
             header-class="shadow-l mb-0 pb-4"
             @open="onDrawerOpen">
    <template #default>
      <el-form ref="form" :model="dataFrom" :rules="dataFromRules" label-width="60px" @submit.native.prevent>
        <el-form-item label="名称" prop="name">
          <el-input v-model="dataFrom.name" clearable placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="表达式" prop="name">
          <epms2-ace-editor v-model="dataFrom.script"
                            lang="javascript"
                            class="border-b border-r"
                            style="width:100%;height: 300px;"/>
        </el-form-item>

      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="eventData=null;drawerVisible=false">关闭</el-button>
        <el-button type="primary" @click="onSave">保存</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
/////////////////////////////////   外部依赖导入    //////////////////////////
import {onMounted, onUnmounted, ref, reactive, defineProps, defineEmits, computed, nextTick} from 'vue'
import {$localStorage} from "@/utils/application-storage.js";
import $apiService from "@/axios/api.js";
import {Delete, Plus, QuestionFilled} from "@element-plus/icons-vue";
import {TYPE_OF_APPROVER, TYPE_OF_STARTER} from "@/utils/constant.js";
import Epms2AceEditor from "@/components/epms2-ace-editor.vue";

/////////////////////////////////   组件参数    //////////////////////////

/////////////////////////////////   私有变量定义    //////////////////////////
const tenantInfo = ref({
  id: "",
  tenantCode: '',
  systemName: ''
})
const basicInfoFormRules = reactive({
  name: [{required: true, message: '请输入账户', trigger: 'blur'}],
  keyCode: [{required: true, message: '请输入', trigger: 'blur'}],
  customDefinitionCode: [{required: true, message: '请输入', trigger: 'blur'}],
  actualTableName: [{required: true, message: '请选择', trigger: 'blur'}],
})
const dataFromRules = reactive([])
const dataFromRef = ref([])
const dataFrom = ref({
  title: "",
  audits: [],
  cc: []
})
const drawerVisible = ref(false)
const eventData = ref({})
const applicationList = ref([])
const ROLES_OF_APPROVER = ref([])
const DEPARTMENT_OF_APPROVER = ref([])
const USERS_OF_APPROVER = ref([])

/////////////////////////////////   生命周期方法 //////////////////////////
onMounted(() => {
  tenantInfo.value = $localStorage.getTenantInfo()
});
onUnmounted(() => {
});

/////////////////////////////////   页面方法    //////////////////////////
const show = async (bpmnElement, formData) => {
  drawerVisible.value = true
  if (formData) dataFrom.value = {...formData, audits: [{}], cc: [], fieldPermission: [{read: true, edit: true}]}
  await nextTick();
  if (!ROLES_OF_APPROVER.value.length) getRoleList()
  if (!DEPARTMENT_OF_APPROVER.value.length) getDeptList()
  if (!USERS_OF_APPROVER.value.length) getUserList()
}
// const getWorkflowFormOptions = () => {
//   const data = {
//     params: {
//       actualFormType: 'ProcessForm',
//       status: 'Enable',
//     },
//     all: true,
//   }
//   $apiService.getFormList(data).then((res) => {
//     workflowFormOptions.value = res.data.data.content.map((item) => {
//       const {formName, actualTableName} = item
//       return {label: formName, value: actualTableName}
//     })
//   })
// }
const submitDialogForm = () => {
}
const openFormDialog = (action, event, data) => {

}
const onDrawerOpen = () => {
  // if (scriptHelpDrawerContent.value) return
  // $apiService.queryDefaultJsFunctionsInstruction().then((res) => {
  //   scriptHelpDrawerContent.value = res.data.data
  // })
}
const getRoleList = () => {
  $apiService.getRoleList({params: {}, all: true,}).then((res) => {
    ROLES_OF_APPROVER.value = res.data.data.content
  })
}
const getDeptList = () => {
  const deptSearchForm = {
    params: {},
    page: 1,
    size: 999,
    sort: ['name,desc'],
  }
  $apiService.getDepartmentAsList(deptSearchForm).then((res) => {
    DEPARTMENT_OF_APPROVER.value = res.data.data.content
  })
}
const getUserList = () => {
  const data = {
    params: {
      status_ne: 'Disable',
      tenantId: tenantInfo.value.id,
    },
    sort: ['deptName,desc'],
    all: true,
  }
  $apiService.queryAllForBiz(data).then((res) => {
    USERS_OF_APPROVER.value = res.data.data.content
  })
}

const onSave = () => {
}
/////////////////////////////////   暴露内部方法，让父组件可以访问    //////////////////////////
defineExpose({
  show
});
</script>

<style scoped>
:deep(.bold-label .el-form-item__label) {
  font-weight: bold;
  color: black;
  margin-bottom: 0;
}
</style>
